import React, { PureComponent } from 'react'

import { SwitchTransition, CSSTransition } from 'react-transition-group'

import './SwitchTransition.css'

export default class SwitchTransitionCpn extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      isOn: true,
    }
  }
  render() {
    const { isOn } = this.state
    return (
      <div>
        {/* mode: 'out-in'|'in-out'  default: 'out-in' */}
        <SwitchTransition mode='in-out'>
          {/* key  决定切换后显示的内容 */}
          <CSSTransition key={isOn ? 'on' : 'off'} timeout={500} classNames='fade' >
            <button onClick={() => this.setState({isOn: !isOn})}>{isOn ? 'on' : 'off'}</button>
          </CSSTransition>
        </SwitchTransition>
      </div>
    )
  }
}
